import React from 'react';
import { Card } from 'antd';
import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts';

// 模拟数据
const mockData = [
  { name: '1', value: 5 },
  { name: '2', value: 10 },
  { name: '3', value: 8 },
  { name: '4', value: 4 },
  { name: '5', value: 3 },
  { name: '6', value: 6 },
  { name: '7', value: 7 },
];

const Statistics: React.FC = () => {
  return (
    <Card title="今日交易用户数" size="small" style={{ height: '200px', display: 'flex', flexDirection: 'column' }}>
      <div style={{ padding: '8px 0', flex: 1, display: 'flex', flexDirection: 'column' }}>
        <div style={{ fontSize: '24px', marginBottom: '0' }}>
          ¥39,165
        </div>
        <div style={{ marginBottom: 'auto' }}>
          <ResponsiveContainer width="100%" height={60}>
            <BarChart data={mockData} margin={{ top: 0, right: 5, left: 5, bottom: 10 }}>
              <XAxis hide={true} />
              <YAxis hide={true} domain={[0, 'dataMax + 2']} />
              <Tooltip hide={true} />
              <Bar dataKey="value" fill="#3b82f6" radius={[0, 0, 0, 0]} />
            </BarChart>
          </ResponsiveContainer>
        </div>
        <div style={{ fontSize: '12px', borderTop: '1px solid #e8e8e8', paddingTop: '8px', color: '#999', marginTop: 'auto' }}>
          退货率 <span style={{ fontWeight: 'bold', color: 'black' }}>5.14%</span>
        </div>
      </div>
    </Card>
  );
};

export default Statistics;